<template>
    <el-dialog
            v-model="openDialog"
            align-center
            title="添加公告内容"
            width="20%"
    >
        <div>
            <el-form
                    ref="addRef"
                    :model="dialogForm"
                    :rules="rules"
                    class="demo-ruleForm"
                    hide-required-asterisk
                    label-width="70px"
                    status-icon
            >
                <el-form-item label="标题" prop="title">
                    <el-input v-model.trim="dialogForm.title" maxlength="15" show-word-limit/>
                </el-form-item>
                <el-form-item label="公告内容" prop="context">
                    <el-input v-model.trim="dialogForm.context" maxlength="200" show-word-limit type="textarea"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="openDialog = false">取消</el-button>
        <el-button type="primary" @click="submitForm(addRef)">
          提交
        </el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script lang='ts' setup>
import { defineEmits, defineExpose, defineProps, reactive, ref } from 'vue'
import { noticeInit, rules } from '@/config/formConfig'
import type { FormInstance } from 'element-plus'
import { NoticeService } from '@/api'
import { Notification } from '@/plugins/element'

defineProps({ open })
const emit = defineEmits(['update'])
const openDialog = ref(false)
const addRef = ref<FormInstance>()
let dialogForm = reactive({ ...noticeInit })
const noticeDialog = () => {
  openDialog.value = true
}

defineExpose({ noticeDialog })

// 提交公告信息
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      NoticeService.postNotice(dialogForm).then(res => {
        emit('update')
        openDialog.value = false
        Notification.success(res.data)
        dialogForm = { ...noticeInit }
      })
    }
  })
}
</script>

<style lang='scss' scoped>

</style>